<template>
  <div class="min-h serveProject bg-wt">
    <SearchForm
      :searchData="pagination"
      :statusData="statusData"
      @handleClear="handleClear"
      @handleReset="handleReset"
      @handleSearch="getList"
    ></SearchForm>
    <!--  -->
    <TableList
      :data="data"
      :hover="hover"
      :dataLoading="dataLoading"
      :pagination="pagination"
      :total="total"
      @onPageChange="onPageChange"
      @handleBulid="handleBulid"
      @handleEdit="handleEdit"
    >
    </TableList>
    <DialogForm
      ref="formRef"
      :title="title"
      :visible="visible"
      :data="formBaseData"
      @handleClose="handleClose"
      @handleAdd="handleAdd"
      @handleEdit="handleEditForm"
    ></DialogForm>
  </div>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue'
import {
  getProjectList,
  projectAdd,
  getProjectDetails,
  projectUpdate
} from '@/api/serve'
import TableList from './components/TableList.vue'
import SearchForm from './components/SearchForm.vue'
import { statusData } from '@/utils/commonData'
import DialogForm from './components/DialogForm.vue'
import { MessagePlugin } from 'tdesign-vue-next'

const data = ref([])
const total = ref(0)
const dataLoading = ref(false) // 加载中
const hover = ref(false)
const visible = ref(false)
const formRef = ref(null)
const title = ref('')
const formBaseData = ref({})

const pagination = ref({
  pageSize: 3,
  pageNum: 1
})
//生命周期
onMounted(() => {
  getList()
})

//调用接口
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = res.data.total
}

// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}
const handleClear = (val) => {
  if (val === 'name') {
    delete pagination.value.name
  } else {
    delete pagination.value.status
  }
  getList()
}
const handleReset = () => {
  delete pagination.value.name
  delete pagination.value.status
  getList()
}
const handleBulid = () => {
  title.value = '新增'
  visible.value = true
}
//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () => {
  visible.value = false
}
const handleAdd = async (val) => {
  //调用接口方法
  const res = await projectAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    //刷新列表
    getList()
    //关闭弹窗
    handleClose()
    //清空弹框中的内容，方便下次使用
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
const handleEdit = (row) => {
  title.value = '编辑'
  getDetials(row.id)
  visible.value = true
}
const getDetials = async (id) => {
  const res = await getProjectDetails(id)
  if (res.code === 200) {
    formBaseData.value = res.data
  }
}
const handleEditForm = async (val) => {
  const res = await projectUpdate(val)
  if (res.code === 200) {
    MessagePlugin.success('编辑成功')
    //刷新列表
    getList()
    //关闭弹窗
    handleClose()
    //清空弹框中的内容，方便下次使用
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
</script>
